<template>
  <view class="content">
    <view class="row b-b">
      <text class="tit">姓名</text>
      <input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">手机号码</text>
      <input class="input" type="number" v-model="addressData.phoneNumber" placeholder="收货人手机号码"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">邮政编码</text>
      <input class="input" type="number" v-model="addressData.postCode" placeholder="收货人邮政编码"
             placeholder-class="placeholder"/>
    </view>
<!--    <view class="row b-b">-->
<!--      <text class="tit">所在区域</text>-->
<!--      <text @click="chooseLocation" class="input">-->
<!--        {{ addressData.province }} {{ addressData.city }} {{ addressData.region }}-->
<!--      </text>-->
<!--      <text class="yticon icon-shouhuodizhi" @click="chooseLocation"></text>-->
<!--    </view>-->
    		<view class="row b-b">
    			<text class="tit">所在区域</text>
    			<input class="input" type="text" v-model="addressData.prefixAddress" placeholder="所在区域" placeholder-class="placeholder" />
    		</view>
    <!--    <view>-->
    <!--      <picker mode="multiSelector" :range="multiArray" @change="onMultiPickerChange">-->
    <!--        <view class="picker">-->
    <!--          <text class="tit">所在区域</text>-->
    <!--          &lt;!&ndash; 使用 map 来遍历 multiIndex 并获取对应的 label（或你想要的显示文本） &ndash;&gt;-->
    <!--          {{ getSelectedLabels().join(' / ') }}-->
    <!--        </view>-->
    <!--      </picker>-->
    <!--    </view>-->
    <!--    <view class="container">-->
    <!--		<view @click="bindDevice">所在区域</view>-->
    <!--        <cascade-picker ref="picker" :title="cascadePicker.title" :layer="cascadePicker.layer" :data="cascadePicker.data" @callback="pickerCallback"></cascade-picker>-->
    <!--    </view>-->
    <!--    <view>-->
    <!--    <uni-data-picker v-slot:default="{data, error, options}" :localdata="localData" popup-title="请选择省市区" @change="onchange" @nodeclick="onnodeclick">-->
    <!--						<view class="selectedAddress">-->
    <!--							<view v-if="data.length == 0 && curLocation">{{ curLocation }}</view>-->
    <!--							<view v-if="data.length" class="selected">-->
    <!--								<view v-for="(item,index) in data" :key="index" class="selected-item">-->
    <!--								<text>{{item.text}} </text>-->
    <!--								</view>-->
    <!--							</view>-->
    <!--							<view class="addrlocation">-->
    <!--								<uni-icons type="location" color="#ec4149" size="24"></uni-icons>-->
    <!--							</view>-->
    <!--						</view>-->
    <!--    </uni-data-picker>-->
    <!--  </view>-->
    <!--    <view class="container">-->
    <!--      &lt;!&ndash; 一级选择器 &ndash;&gt;-->
    <!--      <picker mode="selector" :range="provinceList" bindchange="handleProvinceChange" :value="provinceIndex">-->
    <!--        <view class="picker-block">-->
    <!--          <text>请选择省份</text>-->
    <!--          <text>{{ provinceName }}</text>&lt;!&ndash; 显示选择的省份 &ndash;&gt;-->
    <!--        </view>-->
    <!--      </picker>-->
    <!--      &lt;!&ndash; 二级选择器 &ndash;&gt;-->
    <!--      <picker mode="selector" :range="cityList" bindchange="handleCityChange" :value="cityIndex">-->
    <!--        <view class="picker-block">-->
    <!--          <text>请选择城市</text>-->
    <!--          <text>{{ cityName }}</text>-->
    <!--          &lt;!&ndash; 显示选择的城市 &ndash;&gt;</view>-->
    <!--      </picker>-->
    <!--      &lt;!&ndash; 三级选择器 &ndash;&gt;-->
    <!--      <picker mode="selector" :range="districtList" bindchange="handleDistrictChange" :value="districtIndex">-->
    <!--        <view class="picker-block">-->
    <!--          <text>请选择区县</text>-->
    <!--          <text>{{ districtName }}</text>-->
    <!--          &lt;!&ndash; 显示选择的区县 &ndash;&gt;-->
    <!--        </view>-->
    <!--      </picker>-->
    <!--    </view>-->
    <!--    TODO测试-->


    <view class="row b-b">
      <text class="tit">详细地址</text>
      <input class="input" type="text" v-model="addressData.detailAddress" placeholder="详细地址"
             placeholder-class="placeholder"/>
    </view>
    <view class="row b-b">
      <text class="tit">智能识别</text>
      <input class="input" type="text" v-model="address" placeholder="地址一键粘贴即可识别"
             placeholder-class="placeholder"/>
      <button type="default" @click="parseAddress">智能识别地址</button>
    </view>
    <view class="row default-row">
      <text class="tit">设为默认</text>
      <switch :checked="addressData.defaultStatus==1" color="#fa436a" @change="switchChange"/>
    </view>
    <button class="add-btn" @click="confirm">提交</button>
  </view>
</template>

<script>
import {
  addAddress,
  updateAddress,
  fetchAddressDetail, toParseAddress, getAddressList
} from '@/api/address.js';
// import UniDatePicker from 'path/to/uni-data-picker.vue';


export default {
  data() {
    return {
      addressData: {
        name: '',
        phoneNumber: '',
        postCode: '',
        detailAddress: '',
        default: false,
        province: '',
        provinceId: null,
        city: '',
        cityId: null,
        region: '',
        regionId: null,
        prefixAddress: '',
      },
      address: [],
      provinceList: [],
      provinceIndex: 0,
      provinceName: "",
      cityList: [],
      cityIndex: 0,
      cityName: "",
      districtList: [],
      districtIndex: 0,
      districtName: "",
      localData: []
    }
  },
  onLoad(option) {
    this.addressListOption();
    let title = '新增收货地址';
    if (option.type === 'edit') {
      title = '编辑收货地址'
      fetchAddressDetail(option.id).then(response => {
        this.addressData = response.data;
        this.addressData.prefixAddress = this.addressData.province + this.addressData.city + this.addressData.region;
      });
    }
    this.manageType = option.type;
    this.initData();
    uni.setNavigationBarTitle({
      title
    })
  },
  methods: {
    addressListOption() {
      console.log("ADDRESS ---")
      getAddressList().then(res => {
        console.log("ADDRESS111" + res.data)
        this.localData = res.data
      })
    },
    initData() {
      // 初始化省份列表
      this.provinceList = this.localData.map(item => item.dictLabel);

      // 初始化城市列表
      this.handleProvinceChange({detail: {value: this.provinceIndex}});
    },
    handleProvinceChange(e) {
      const index = e.detail.value;
      this.provinceIndex = index;
      this.provinceName = this.provinceList[index];

      // 根据选择的省份，初始化城市列表
      const cityData = this.localData[index].children;
      this.cityList = cityData.map(city => city.dictLabel);

      // 初始化区县列表
      this.handleCityChange({detail: {value: this.cityIndex}});
    },
    handleCityChange(e) {
      const index = e.detail.value;
      this.cityIndex = index;
      this.cityName = this.cityList[index];

      // 根据选择的城市，初始化区县列表
      const districtData = this.localData[this.provinceIndex].children[index].children;
      this.districtList = districtData.map(district => district.dictLabel);

      // 初始化选中的区县
      this.handleDistrictChange({detail: {value: this.districtIndex}});
    },
    handleDistrictChange(e) {
      const index = e.detail.value;
      this.districtIndex = index;
      this.districtName = this.districtList[index];
    },
    parseAddress() {
      console.log(this.address)
      toParseAddress(this.address).then(response => {
        console.log(response.data);
        this.addressData = response.data;
        this.addressData.prefixAddress = this.addressData.province + this.addressData.city + this.addressData.region;
      })
    },
    switchChange(e) {
      this.addressData.defaultStatus = e.detail.value ? 1 : 0;
    },
    //地图选择地址
    chooseLocation() {
      uni.chooseLocation({
        success: (data) => {
          this.covertAdderss(data.address);
          this.addressData.detailAddress = data.name;
        }
      })
    },
    //将地址转化为省市区
    covertAdderss(address) {
      console.log("covertAdderss", address);
      if (address.indexOf("省") != -1) {
        this.addressData.province = address.substr(0, address.indexOf("省") + 1);
        address = address.replace(this.addressData.province, "");
        this.addressData.city = address.substr(0, address.indexOf("市") + 1);
        address = address.replace(this.addressData.city, "");
        this.addressData.region = address.substr(0, address.indexOf("区") + 1);
      } else {
        this.addressData.province = address.substr(0, address.indexOf("市") + 1);
        address = address.replace(this.addressData.province, "");
        this.addressData.city = "";
        this.addressData.region = address.substr(0, address.indexOf("区") + 1);
      }
    },
    //提交
    confirm() {
      let data = this.addressData;
      if (!data.name) {
        this.$api.msg('请填写收货人姓名');
        return;
      }
      if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.phoneNumber)) {
        this.$api.msg('请输入正确的手机号码');
        return;
      }
      // if (!data.prefixAddress) {
      //   this.$api.msg('请输入区域');
      //   return;
      // }
      // this.covertAdderss(data.prefixAddress);
      // if (!data.province) {
      //   this.$api.msg('请输入正确的省份');
      //   return;
      // }
      if (!data.detailAddress) {
        this.$api.msg('请填写详细地址信息');
        return;
      }
      if (this.manageType == 'edit') {
        updateAddress(this.addressData).then(response => {
          //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
          this.$api.prePage().refreshList(data, this.manageType);
          this.$api.msg("地址修改成功！");
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        });
      } else {
        addAddress(this.addressData).then(response => {
          //this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
          this.$api.prePage().refreshList(data, this.manageType);
          this.$api.msg("地址添加成功！");
          setTimeout(() => {
            uni.navigateBack()
          }, 800)
        });
      }
    },
  }
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.picker-block {
  margin-bottom: 20px;
}

page {
  background: $page-color-base;
  padding-top: 16upx;
}

.row {
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 30upx;
  height: 110upx;
  background: #fff;

  .tit {
    flex-shrink: 0;
    width: 150upx;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .input {
    flex: 1;
    font-size: 30upx;
    color: $font-color-dark;
  }

  .icon-shouhuodizhi {
    font-size: 36upx;
    color: $font-color-light;
  }
}

.default-row {
  margin-top: 16upx;

  .tit {
    flex: 1;
  }

  switch {
    transform: translateX(16upx) scale(.9);
  }
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  margin: 60upx auto;
  font-size: $font-lg;
  color: #fff;
  background-color: $base-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
